import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../controllers/goods_details_controller.dart';
import '../../../utils/screenAdapter.dart';
import '../../../common/widget/customizeAppBar.dart';
import '../../../utils/subHeaderBar.dart';
import './first_page_view.dart';
import './second_page_view.dart';
import './thrid_page_view.dart';
import './card_item_num_view.dart';

class GoodsDetailsView extends GetView<GoodsDetailsController> {
  const GoodsDetailsView({super.key});

  // 显示底部属性选择弹窗
  void showBottomAttr({required String actions}) {
    controller.getPopUpBottomActions(actions);
    Get.bottomSheet(
      enterBottomSheetDuration: const Duration(milliseconds: 200),
      exitBottomSheetDuration: const Duration(milliseconds: 200),
      // 在bottomSheet中动态监听渲染状态需要把Obx改成GetBuilder才生效
      GetBuilder<GoodsDetailsController>(
        init: controller,
        builder: (controller) {
          return Container(
            width: double.infinity,
            height: ScreenAdapter.height(1200),
            padding: EdgeInsets.all(ScreenAdapter.width(30)),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              color: Colors.white,
            ),
            child: Stack(
              children: [
                ListView(
                  children: [
                    ...controller.goodsDetail.value.attr!.map((item) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Text(
                                item.cate!,
                                style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: ScreenAdapter.fontSize(30),
                                ),
                              ),
                              item.cate == '颜色'
                                  ? InkWell(
                                      onTap: () {
                                        Get.back(); // 关闭弹窗
                                      },
                                      child: Icon(Icons.close),
                                    )
                                  : SizedBox(),
                            ],
                          ),
                          Container(
                            padding: EdgeInsets.only(
                              top: ScreenAdapter.height(36),
                            ),
                            width: ScreenAdapter.width(560),
                            child: Wrap(
                              spacing: ScreenAdapter.width(30), //主轴上子控件的间距
                              runSpacing: ScreenAdapter.height(30), //交叉轴上子控件的间距
                              children: item.attrList!.map((item2) {
                                return InkWell(
                                  onTap: () {
                                    controller.checkedAttr(
                                      item.cate!,
                                      item2["title"]!,
                                    );
                                    // print(item2["title"]);
                                  },
                                  child: Chip(
                                    label: Text(
                                      item2["title"]!,
                                      style: TextStyle(
                                        color: item2["checked"] == true
                                            ? Colors.white
                                            : Colors.black,
                                      ),
                                    ),
                                    side: BorderSide.none, // 去掉边框
                                    shape: RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(30),
                                    ), // 设置圆角
                                    backgroundColor: item2["checked"] == true
                                        ? Colors.orange
                                        : Color.fromARGB(31, 223, 213, 213),
                                  ), // 带圆角的容器,
                                );
                              }).toList(),
                            ),
                          ),
                          SizedBox(height: ScreenAdapter.height(40)),
                        ],
                      );
                    }),
                    SizedBox(
                      // width: double.infinity,
                      // color: Colors.pink,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [Text("数量"), CardItemNumView()],
                      ),
                    ), // 数量计数器
                  ],
                ),
                Positioned(
                  left: ScreenAdapter.width(20),
                  right: ScreenAdapter.width(20),
                  bottom: ScreenAdapter.height(20),
                  child:
                      controller.popUpBottomActions.value != "confirmSelection"
                      ? InkWell(
                          onTap: () {
                            controller.getCheckedAttrList();
                            if (actions == "buyNow") { // 立即购买
                              controller.buyNow();
                            } else if (actions == "addCart") {
                              controller.addCart(); // 添加购物车
                            }
                          },
                          child: Container(
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                              color: Colors.orange,
                              borderRadius: BorderRadius.circular(
                                ScreenAdapter.radius(20),
                              ),
                            ),
                            height: ScreenAdapter.height(100),
                            child: Text(
                              "确认",
                              style: TextStyle(color: Colors.white),
                            ),
                          ),
                        )
                      : Row(
                          children: [
                            Expanded(
                              flex: 1,
                              child: ElevatedButton(
                                onPressed: () {
                                  controller.getCheckedAttrList();
                                  controller.addCart(); //加入购物车
                                },
                                style: ButtonStyle(
                                  backgroundColor: WidgetStateProperty.all(
                                    Colors.orange,
                                  ),
                                  foregroundColor: WidgetStateProperty.all(
                                    Colors.white,
                                  ),
                                  shape: WidgetStateProperty.all(
                                    RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(
                                        ScreenAdapter.radius(20),
                                      ),
                                    ),
                                  ),
                                ),
                                child: Text("加入购物车"),
                              ),
                            ),
                            SizedBox(width: ScreenAdapter.width(16)),
                            Expanded(
                              flex: 1,
                              child: ElevatedButton(
                                onPressed: () {
                                  controller.getCheckedAttrList();
                                  controller.buyNow();
                                },
                                style: ButtonStyle(
                                  backgroundColor: WidgetStateProperty.all(
                                    Colors.red,
                                  ),
                                  foregroundColor: WidgetStateProperty.all(
                                    Colors.white,
                                  ), // 按钮文字颜色
                                  shape: WidgetStateProperty.all(
                                    RoundedRectangleBorder(
                                      borderRadius: BorderRadius.circular(
                                        ScreenAdapter.radius(20),
                                      ),
                                    ),
                                  ), // 设置按钮圆角
                                ),
                                child: Text("立即购买"),
                              ),
                            ),
                            SizedBox(width: ScreenAdapter.width(16)),
                          ],
                        ), // 弹窗里面的加入购物车和立即购买
                ), // 底部定位确认按钮
              ],
            ),
          );
        },
      ),
    );
  }

  _appBar(BuildContext context) {
    return PreferredSize(
      // PreferredSizeWidget设置appBar的高度
      preferredSize: Size.fromHeight(ScreenAdapter.height(120)),
      child: Obx(
        () => MyAppBar(
          // leading配置的属性无法直接修改宽高，默认是appBar自适应的宽高，可以在里面再嵌套一个SizedBox来设置宽高,并设置其居中对齐
          leading: Container(
            // color: Colors.pink,
            alignment: Alignment.center,
            child: SizedBox(
              width: ScreenAdapter.width(86),
              height: ScreenAdapter.height(86),
              child: ElevatedButton(
                onPressed: () {
                  Get.back();
                },
                style: ButtonStyle(
                  padding: WidgetStateProperty.all(
                    EdgeInsets.zero,
                  ), // 设置按钮内边距为0,当改变外面容器大小时让图标居中
                  backgroundColor: WidgetStateProperty.all(Colors.black12),
                  foregroundColor: WidgetStateProperty.all(Colors.white),
                  shape: WidgetStateProperty.all(const CircleBorder()),
                ),
                child: const Icon(Icons.arrow_back_ios_new_outlined),
              ),
            ),
          ),
          showSearchFlag: "defalut",
          changeTabBar: (currentIndex) {
            controller.onChangedIndex(currentIndex);
          },
          backgroundColor: Color.fromRGBO(
            255,
            255,
            255,
            controller.opacity.value,
          ),
          actions: [
            SizedBox(
              width: ScreenAdapter.width(86),
              height: ScreenAdapter.height(86),
              child: ElevatedButton(
                onPressed: () {},
                style: ButtonStyle(
                  padding: WidgetStateProperty.all(
                    EdgeInsets.zero,
                  ), // 设置按钮内边距为0,当改变外面容器大小时让图标居中
                  backgroundColor: WidgetStateProperty.all(Colors.black12),
                  foregroundColor: WidgetStateProperty.all(Colors.white),
                  shape: WidgetStateProperty.all(const CircleBorder()),
                ),
                child: const Icon(Icons.file_upload_outlined),
              ),
            ),
            SizedBox(
              width: ScreenAdapter.width(86),
              height: ScreenAdapter.height(86),
              child: IconButton(
                onPressed: () {
                  showMenu(
                    // 显示下拉菜单
                    color: Color.fromRGBO(000, 000, 000, 0.7),
                    context: context,
                    position: RelativeRect.fromLTRB(
                      ScreenAdapter.width(500),
                      ScreenAdapter.height(180),
                      0,
                      0,
                    ),
                    items: [
                      const PopupMenuItem(
                        child: Row(
                          children: [
                            Icon(Icons.home, color: Colors.white),
                            Text("首页", style: TextStyle(color: Colors.white)),
                          ],
                        ),
                      ),
                      const PopupMenuItem(
                        child: Row(
                          children: [
                            Icon(Icons.message, color: Colors.white),
                            Text("消息", style: TextStyle(color: Colors.white)),
                          ],
                        ),
                      ),
                      const PopupMenuItem(
                        child: Row(
                          children: [
                            Icon(Icons.star, color: Colors.white),
                            Text("收藏", style: TextStyle(color: Colors.white)),
                          ],
                        ),
                      ),
                    ],
                  );
                },
                style: ButtonStyle(
                  padding: WidgetStateProperty.all(
                    EdgeInsets.zero,
                  ), // 设置按钮内边距为0,当改变外面容器大小时让图标居中
                  backgroundColor: WidgetStateProperty.all(Colors.black38),
                  foregroundColor: WidgetStateProperty.all(Colors.white),
                  shape: WidgetStateProperty.all(const CircleBorder()),
                ),
                icon: Icon(Icons.more_horiz_rounded),
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 当滚动到详情区域出现的tabbar
  Widget _detailsTabBar() {
    return Container(
      width: double.infinity,
      color: Colors.white,
      padding: EdgeInsets.fromLTRB(
        ScreenAdapter.width(220),
        ScreenAdapter.height(30),
        ScreenAdapter.width(220),
        ScreenAdapter.height(30),
      ),
      child: Obx(
        () => Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: SubHeaderBar.values.map((item) {
            return InkWell(
              onTap: () {
                controller.changedsubHeaderIndex(item.index);
              },
              child: Text(
                item.name,
                style: TextStyle(
                  color: item.index == controller.subHeaderIndex.value
                      ? Colors.orange
                      : Colors.black,
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }

  _pageBody() {
    return SizedBox(
      // color: Colors.pink,
      child: SingleChildScrollView(
        // ListView会延迟加载不适用于锚点跳转,需要改成SingleChildScrollView
        // padding: EdgeInsets.all(ScreenAdapter.width(20)),
        controller: controller.scrollController, // 必须加上，才能监听ListView的滚动
        child: Column(
          children: [
            FirstPageView(showBottomAttr: showBottomAttr),
            SecondPageView(subHeader: _detailsTabBar),
            ThridPageView(),
          ],
        ),
      ),
    );
  }

  Widget _bottomGroup() {
    return Positioned(
      left: 0,
      right: 0,
      bottom: 0,
      child: Container(
        color: Colors.white,
        height: ScreenAdapter.height(166),
        width: ScreenAdapter.width(1080),
        child: Row(
          children: [
            SizedBox(
              width: ScreenAdapter.width(200),
              height: ScreenAdapter.height(146),
              child: InkWell(
                onTap: () {
                  Get.toNamed("/cart");
                },
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Icon(Icons.shopping_cart, size: ScreenAdapter.fontSize(46)),
                    Text(
                      "购物车",
                      style: TextStyle(fontSize: ScreenAdapter.fontSize(24)),
                    ),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {
                  showBottomAttr(actions: "addCart");
                },
                style: ButtonStyle(
                  backgroundColor: WidgetStateProperty.all(Colors.orange),
                  foregroundColor: WidgetStateProperty.all(Colors.white),
                  shape: WidgetStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(
                        ScreenAdapter.radius(20),
                      ),
                    ),
                  ),
                ),
                child: Text("加入购物车"),
              ),
            ),
            SizedBox(width: ScreenAdapter.width(16)),
            Expanded(
              flex: 1,
              child: ElevatedButton(
                onPressed: () {
                  showBottomAttr(actions: "buyNow");
                },
                style: ButtonStyle(
                  backgroundColor: WidgetStateProperty.all(Colors.red),
                  foregroundColor: WidgetStateProperty.all(
                    Colors.white,
                  ), // 按钮文字颜色
                  shape: WidgetStateProperty.all(
                    RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(
                        ScreenAdapter.radius(20),
                      ),
                    ),
                  ), // 设置按钮圆角
                ),
                child: Text("立即购买"),
              ),
            ),
            SizedBox(width: ScreenAdapter.width(16)),
          ],
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, // 往上滚动时让Body区域可以延伸到AppBar下面,实现透明导航栏
      appBar: _appBar(context),
      body: Stack(
        children: [
          _pageBody(),
          Positioned(
            left: 0,
            right: 0,
            top: ScreenAdapter.statusBarHeight() + ScreenAdapter.height(120),
            child: Obx(
              () => controller.showSubHeader.value
                  ? _detailsTabBar()
                  : SizedBox(),
            ),
          ),
          _bottomGroup(),
        ],
      ),
    );
  }
}
